import { Component, Prop, Vue } from 'vue-property-decorator'
import style from './TableTab.less'
@Component
export default class TableTab extends Vue {
  @Prop({ default: '' }) private title!: string

  private render() {
    return (
      <div class={style.tableTab}>
        <p class={style.title}>
          <span
            class={style.name}
            {...{ domProps: !this.$slots.title && { innerHTML: this.title } }}
          >
            {this.$slots.title}
          </span>
          <span
            class={{ [style.more]: true, more: true }}
            onClick={this.moreHandler}
          >
            查看更多
            <i class="el-icon-arrow-right" />
          </span>
        </p>
        <div class={style.content}>{this.$slots.default}</div>
      </div>
    )
  }

  private moreHandler() {
    this.$emit('more')
  }
}
